<!DOCTYPE html> 
<html lang="en">
<head>   

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Title -->  
  <title>Gift Oasis | Gift Shop</title>   
 
  <!-- Favicon -->
  

  <!-- Font-Awesome (CSS) -->
  <link rel="stylesheet" href="static/css/all.min.css">

  <!-- Custom Stylesheets -->
  <link rel="stylesheet" href="static/css/main.css">
  <link rel="stylesheet" href="static/css/responsive.css">
   
</head>
<body>

  <!-- ==================== Scroll-Top Area (Start) ==================== -->
  <a href="#" class="scroll-top">
    <i class="fas fa-long-arrow-alt-up"></i>
  </a>
  <!-- ==================== Scroll-Top Area (End) ==================== -->


<header class="header">
  <div class="header-2">

    <div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>

    <!-- == Logo == -->
    <a class="logo" href="index.html">
      <img src="static/picture/Logo.png" alt="logo">
      <div class="logo-name">
        <h3>礼物商城</h3>
      </div>
    </a>

    <div class="container">

      <!-- == Navbar == -->
      <nav class="navbar">

        <a class="nav-btn" href="index.html">首页</a>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="About.html">关于我们</a> </button>
          <div class="dropdown-content">

          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn">登陆注册</a> <i class="fas fa-angle-down"></i> </button>
          <div class="dropdown-content">


            <a href="Login.html">login</a>
            <a href="Register.html">register</a>

          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="Categories.html">商品列表</a><i class="fas fa-angle-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="Product-Single.html">商品详情</a>
            <a href="Cart.html">购物车</a>
            <a href="Order-Single.html">订单详情</a>
          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="Blog-Grid.html">新闻列表</a></button>
          <div class="dropdown-content">



          </div>
        </div>

        <a class="nav-btn" href="Contact.html">联系我们</a>

      </nav>

      <!-- == Icon Container == -->
      <div class="icon-container">
        <div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
        <a href="Login.html" id="login" class="icon fas fa-user"></a>
        <a href="Cart.html" id="cart"> <!-- Cart Page Link -->
          <i class="icon fas fa-shopping-cart"></i>
          <span class="badge">5</span> <!-- Cart Items Count (Badge) -->
        </a>
      </div>

      <!-- == Search Container == -->
      <form class="search-container">
        <input type="search" id="search-bar" placeholder="search here" required=""> <!-- Search Input -->
        <button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
      </form>

    </div>

  </div>
  <!-- ===== Header-2 Area (End) ===== -->

  <!-- ===== Mobile Menu Area (Start) ===== -->
  <div class="mobile-menu">

    <nav class="mobile-navbar">

      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="index.html">首页</a> </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="About.html">关于我们</a></div></i>
        </div>
        <div class="sub-nav-link">

        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn">登录注册</div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Login.html">login</a>
          <a href="Register.html">register</a>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Categories.html">商品列表</a></div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Product-Single.html">商品详情</a>
          <a href="Cart.html">购物车</a>
          <a href="Order-Single.html">订单详情</a>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Blog-Grid.html">新闻列表</a></div>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="Contact.html">关于我们</a> </div>
      </div>

    </nav>

  </div>
  <!-- ===== Mobile Menu Area (End) ===== -->

</header>

  <!-- ==================== Page-Title (Start) ==================== -->
  <div class="page-title">

    <div class="title">
      <h2>Product Single</h2>
    </div> 

    <div class="link">
      <a href="index.html">首页</a>
      <i class="fa-solid fa-arrow-right-long"></i>
      <span class="page">商品详情</span>
    </div>

  </div>
  <!-- ==================== Page-Title (End) ==================== -->
   


  <!-- ==================== Product Single Area (Start) ==================== -->
  <section class="product-single">
      
    <!-- ========== Product-Description Area (Start) ========== -->
    <div class="product-des">

      <div class="box-container">

        <!-- Product Image -->
        <div class="image">
          <div class="image-container">
      
            <!-- Main product image -->
            <div class="main">
              <img src="static/picture/Product-1.jpg" alt="Product-Image"> <!-- Main product image -->
            </div>
      
            <!-- Product Image Gallery Buttons -->
            <div class="change-btns">
              <img class="active" src="static/picture/Product-1.jpg" alt="Product-Gallery-Image-1"> <!-- Active image in the gallery -->
              <img src="static/picture/23.jpg" alt="Product-Gallery-Image-2"> <!-- Image in the gallery -->
              <img src="static/picture/31.jpg" alt="Product-Gallery-Image-3"> <!-- Image in the gallery -->
              <img src="static/picture/41.jpg" alt="Product-Gallery-Image-4"> <!-- Image in the gallery -->
            </div>
      
          </div>
        </div>
      
        <!-- Product Information -->
        <div class="content">
          <div class="text">
      
            <div class="introduction">
              <div class="price">$40.00/- <span>$50.00</span></div> <!-- Product price -->
              <h3>名牌包包</h3> <!-- Product Title -->
              <div class="intro">
                <!-- Product Rating -->
                <div class="rating">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i> 
                  <i class="far fa-star"></i>
                </div>
                <span>4.5 (10)</span> <!-- Number of reviews -->
              </div>
            </div>
      
            <p>这款皮包不仅是一件时尚配饰，更是一份精心挑选的礼物，蕴含着你的深深祝福。它采用优质的材料制作，触感柔软，色泽温润，无论是外观还是内在品质都堪称上乘。
            在设计上，这款皮包注重细节和实用性。它的造型简约大方，线条流畅，无论是商务场合还是休闲时光都能轻松搭配。包内结构设计合理，多个隔层让你能够有序地放置各种物品，如手机、钱包、钥匙等，方便实用。
            此外，这款皮包还具备一些独特的特点。一份独特的纪念品。无论是送给亲友还是合作伙伴，都能表达你的诚意和尊重。而且，这款皮包的品质和使用寿命都非常出色，能够陪伴收礼人度过许多美好的时光。
</p>
      
            <!-- Quantity Box -->
            <div class="box">

              <div class='qty'>
                <h4>数量</h4>
                <div class="quantity buttons_added">
                  <input type="button" value="-" class="minus">
                  <input type="number" step="1" min="1" max="100" name="quantity" value="1" title="Qty" class="input-text qty text">
                  <input type="button" value="+" class="plus">
                </div>
              </div>

              <a href="Cart.html" class="btn">添加到购物车</a> <!-- Add To Cart Button -->
      
            </div>

            <!-- Product Categories -->
            
          </div>
        </div>
      
      </div>
      

      <div class="product-info tab-info">

        <!-- Tab Buttons -->
        <div class="tab-buttons">
          <button type="button" class="button active" data-target="#description">描述</button> <!-- Active tab button for description -->
          <button type="button" class="button" data-target="#additional">附加信息</button> <!-- Tab button for additional information -->
          <button type="button" class="button" data-target="#reviews">评价 (2)</button> <!-- Tab button for reviews -->
        </div>
      
        <!-- Tab Sections -->
        <div class="tab-sections">
  
          <!-- Description Tab Section -->
          <div class="tab-section active" id="description">
            <div class="description">
              <p>
                这款皮包不仅是一件时尚配饰，更是一份精心挑选的礼物，蕴含着你的深深祝福。它采用优质的材料制作，触感柔软，色泽温润，无论是外观还是内在品质都堪称上乘。
                在设计上，这款皮包注重细节和实用性。它的造型简约大方，线条流畅，无论是商务场合还是休闲时光都能轻松搭配。包内结构设计合理，多个隔层让你能够有序地放置各种物品，如手机、钱包、钥匙等，方便实用。
              </p>
            </div>
          </div>
        
          <!-- Additional Information Tab Section -->
          <div class="tab-section" id="additional">
            <div class="additional-info">
              <div class="item"><h3>品牌:</h3><span>时尚风格</span></div> <!-- Product brand -->
              <div class="item"><h3>布料:</h3><span>鳄鱼皮</span></div> <!-- Material information -->
              <div class="item"><h3>颜色款式:</h3><span>黑色, 酒红, 红色</span></div> <!-- Color options -->
            </div>
          </div>
        
          <!-- Reviews Tab Section -->
          <div class="tab-section" id="reviews">
            <div class="reviews">
        
              <h2>2个评价</h2>
        
              <!-- Review Comment 1 -->
              <div class="comment">
                <div class="comment-image">
                  <img src="static/picture/Pic-12.jpg" alt="comment-author-Pic"> <!-- Reviewer's image -->
                </div>
                <div class="comment-content">
                  <h3>David Johnson</h3> <!-- Reviewer's name -->
                  <h6>Oct 12, 2023</h6> <!-- Review date -->
                  <p class="text">我喜欢我的新手提包!它既时尚又实用，而且质量非常好。强烈推荐。</p> <!-- Review content -->
                </div>
              </div>
        
              <!-- Review Comment 2 -->
              <div class="comment">
                <div class="comment-image">
                  <img src="static/picture/Pic-22.jpg" alt="comment-author-Pic"> <!-- Reviewer's image -->
                </div>
                <div class="comment-content">
                  <h3>Laura Smith</h3> <!-- Reviewer's name -->
                  <h6>Oct 15, 2023</h6> <!-- Review date -->
                  <p class="text">我买了这个手提包作为礼物，收礼者高兴极了。这是一件永恒的时装。</p> <!-- Review content -->
                </div>
              </div>
        
              <!-- Leave a Reply Section -->
              <div class="leave-reply">
                <form class="form" action="comment.php">
                  <h2>发表你的评价</h2>
        
                  <div class="input-box">
                    <input type="text" name="name" class="box" id="name" placeholder="Name" required=""> <!-- Name input -->
                    <input type="email" name="email" class="box" id="email" placeholder="Email" required=""> <!-- Email input -->
                  </div>
        
                  <textarea cols="30" rows="10" name="comment" class="box" id="comment" placeholder="Comment"></textarea> <!-- Comment input -->
        
                  <input type="submit" value="Submit" class="btn"> <!-- Submit button -->
        
                </form>
              </div>
        
            </div>
          </div>
        
        </div>
        
      
      </div>
      
    </div> 
    <!-- ========== Product-Description Area (End) ========== -->

    <!-- ========== Related Products Area (Start) ========== -->
    <div class="related-items">

      <div class="sidebar-heading">
        <h2>相关推荐</h2> <!-- Sidebar Heading -->
      </div>
    
      <!-- Related Products -->
      <div class="box-container">
    
        <!-- Product-2 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-2.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$6.00 <span>$9.00</span></div> <!-- Product Price -->
            <a href=""><h3>rings</h3></a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div> 
          </div>
        </div>
      
        <!-- Product-3 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-3.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$6.00 <span>$9.00</span></div> <!-- Product Price -->
            <a href=""><h3>Candles</h3></a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div> 
          </div>
        </div>
      
        <!-- Product-4 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-4.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$6.00 <span>$9.00</span></div> <!-- Product Price -->
            <a href=""><h3>Picture frames</h3></a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div> 
          </div>
        </div>
      
        <!-- Product-5 -->
        <div class="product-item">
          <div class="image">
            <img src="static/picture/Product-5.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="price">$6.00 <span>$9.00</span></div> <!-- Product Price -->
            <a href=""><h3>necklace</h3></a> <!-- Product Title -->
            <!-- Product Rating -->
            <div class="rating">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div> 
          </div>
        </div>
    
      </div>
    </div>
    <!-- ========== Related Products Area (End) ========== -->  

  </section>
  <!-- ==================== Product Single Area (End) ==================== -->


    
  <!-- ==================== Footer Area (Start) ==================== -->
  <footer class="footer">
  
    <div class="box-container">
  
      <!-- == Gift Shop Description & Social Account Links == -->
      <div class="footer-item">
  
        <!-- Logo -->
        <a class="logo" href="">
          <img src="static/picture/Logo.png" alt="logo">
          <div class="logo-name">
            <h3>礼物商城</h3>
          </div>
        </a>
        <!-- Description -->
        <p>在我们的礼品店探索周到和独特的礼物。无论在什么场合，都要为你爱的人挑选一份完美的礼物。</p>
        <!-- Social Account Links -->
        <div class="social">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
  
      </div>
  
      <!-- == Useful Links == -->
      <div class="footer-item">
        <h2>useful links</h2>
        <div class="info links pages">
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="index.html">首页</a></p>
            <p><i class="fas fa-square-full"></i><a href="About.html">关于我们</a></p>
            <p><i class="fas fa-square-full"></i><a href="Login.html">登录</a></p>
            <p><i class="fas fa-square-full"></i><a href="Register.html">注册</a></p>
          </div>
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="Categories.html">商品列表</a></p>
            <p><i class="fas fa-square-full"></i><a href="Product-Single.html">商品详情</a></p>
            <p><i class="fas fa-square-full"></i><a href="Cart.html">购物车</a></p>
            <p><i class="fas fa-square-full"></i><a href="Contact.html">联系我们</a></p>
          </div>
        </div>
      </div>
  
      <!-- == Product Categories == -->
  
  
      <!-- == Contact Information == -->
      <div class='footer-item'>
        <h2>contact info</h2>
        <div class="info connect">
          <p><i class="fas fa-phone"></i><span>+111-222-333</span></p>
          <p><i class="fas fa-phone"></i><span>+123-456-789</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">abc@gmail.com</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">xyz@gmail.com</span></p>
          <p><i class="fas fa-map"></i><span>karachi, pakistan</span></p>
        </div>
      </div>
  
    </div>
  
  </footer>
  <!-- ==================== Footer Area (End) ==================== -->



  <!-- Jquery -->
  <script src="static/js/jquery.min.js"></script>

  <!-- Custom Script Files -->
  <script src="static/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
  <script src="static/js/nav-link-toggler.js"></script> <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
  <script src="static/js/Product-Gallery.js"></script> <!-- Manages the product gallery functionality on the website, allowing users to view and interact with product images in a gallery format. -->
  <script src="static/js/quantity.js"></script> <!-- Handles quantity functionality -->
  <script src="static/js/tab-info.js"></script> <!-- allows users to switch between different sections of content by clicking on tab buttons -->


</body>
</html>